<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>homePage</title>
  <script type="text/javascript" th:inline="JavaScript"></script>
</head>
<body>
    <div th:fragment="equipmentAlarmGroup">
        <!-- 设备报警组设置 -->
        <div class="cd-popup3 equipmentAlarmGroupSet equipmentAlarmGroupSet-pop" id="equipmentAlarmGroupSetModal">
            <div class="cd-popup-container3 equipmentAlarmGroupSetModal modalStyle">
                <!-- 小叉 关闭按钮 -->
                <!-- <a class="cd-popup-close closeModal" href="javascript:;"></a> -->
                <div class="modal-top"></div>
                <div class="modal-title">设备报警组设置</div>
                <div class="equipmentAlarmGroupSetSearchBox">
                    <input type="text" class="searchInputStyle equipmentAlarmGroupSetSearchInput" placeholder="请输入设备名称或地址">
                    <span class="btnStyle equipmentAlarmGroupSetSearchBtn" id="equipmentAlarmGroupSetSearchBtn">搜索</span>
                </div>
                <!-- 左边-->
                <div class="selectEquipmentBox">
                    <form>
                        <div>        
                            <span>摄像头 :</span>
                            <input type="text" class="notEmptyInput"  name="camera" autocomplete="off" placeholder="设备一">                      
                        </div>
                        <div>        
                            <span>烟感 :</span>
                            <input type="text" class="notEmptyInput"  name="camera" autocomplete="off" placeholder="可最多选择三个设备">                      
                        </div>
                        <div>        
                            <span>红外线热成像 :</span>
                            <input type="text" class="notEmptyInput"  name="camera" autocomplete="off" placeholder="可最多选择三个设备">                      
                        </div>
                        <div>        
                            <span>消火栓 :</span>
                            <input type="text" class="notEmptyInput"  name="camera" autocomplete="off" placeholder="可最多选择三个设备">                      
                        </div>
                        <div>        
                            <span>智能用电 :</span>
                            <input type="text" class="notEmptyInput"  name="camera" autocomplete="off" placeholder="只能选择一个设备">                      
                        </div>
                        <div>        
                            <span>充电桩 :</span>
                            <input type="text" class="notEmptyInput"  name="camera" autocomplete="off" placeholder="只能选择一个设备">                      
                        </div>
                    </form>                    
                </div>
                <!-- 右边 -->
                <div class="equipmentAlarmGroupSetTable">
                    <table class="table table-bordered" id="equipmentAlarmGroupSetTable" style="margin: -1px; width: 616px;">
                        <thead>
                            <tr>                                
                                <th style="width: 10%">序号</th>
                                <th style="width: 30%">设备名称</th>
                                <th style="width: 52%">地址</th>
                                <th style="width: 8%">
                                   <input type="checkbox" id="equipmentAlarmGroupSetSelectAll"> 
                                </th>
                            </tr>
                        </thead>
                        <tbody class="tbodyList">
                            
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <div class="equipmentAlarmGroupSetPageBox pageBox" id="equipmentAlarmGroupSetPageBox">
                    <ul class="pagination" id="equipmentAlarmGroupPage"></ul>
                    <div class="pageJump none">
                    <span>跳转到</span>
                    <input type="text" />
                    <span>页</span>
                    <button type="button" class="button btn btn-default">跳转</button>
                    </div>
                </div>
                <!-- 确认按钮 -->
                <div class="equipmentAlarmGroupSetBtnBox">
                    <button type="submit" class="btn btn-primary equipmentAlarmGroupBtn equipmentAlarmGroupBtnSubmit" style="background-color: #70abe1; margin-right: 20px;">确定</button>
                    <button type="button" class="btn btn-primary equipmentAlarmGroupBtn cd-popup-close1" style="background-color: #768fa5;">取消</button>
                </div>
            </div>
        </div>

        <!-- 设备报警组 -->
        <div class="cd-popup3 equipmentAlarmGroup equipmentAlarmGroup-pop" id="equipmentAlarmGroupModal">
            <div class="cd-popup-container3 equipmentAlarmGroupsModal modalStyle">
                <!-- 小叉 关闭按钮 -->
                <a class="cd-popup-close closeModal" href="javascript:;"></a>
                <div class="modal-top"></div>
                <div class="modal-title">设备报警组</div>
                <div class="equipmentAlarmGroupSearchBox">
                    <span>设备组名:</span>
                    <input type="text" class="searchInputStyle equipmentAlarmGroupSearchInput" placeholder="请输入设备名称或地址">
                    <span class="btnStyle equipmentAlarmGroupSearchBtn" id="equipmentAlarmGroupSearchBtn">搜索</span>
                </div>
                <!-- 表格 -->
                <div class="equipmentAlarmGroupTable">
                    <table class="table table-bordered" id="equipmentAlarmGroupTable" style="margin: -1px; width: 1040px;">
                        <thead>
                            <tr>   
                                <th style="width: 5%">
                                    <input type="checkbox" id="equipmentAlarmGroupSelectAll"> 
                                </th>                             
                                <th style="width: 5%">序号</th>
                                <th style="width: 28%">组名</th>
                                <th style="width: 32%">成员</th>
                                <th style="width: 25%">操作</th>
                            </tr>
                        </thead>
                        <tbody class="tbodyList">
    
                        </tbody>
                    </table>
                </div>
                <!-- 分页 -->
                <div class="equipmentAlarmGroupPageBox pageBox" id="equipmentAlarmGroupPageBox">
                    <ul class="pagination" id="equipmentAlarmGroupPage"></ul>
                    <div class="pageJump none">
                    <span>跳转到</span>
                    <input type="text" />
                    <span>页</span>
                    <button type="button" class="button btn btn-default">跳转</button>
                    </div>
                </div>
                <!-- 添加按钮 -->
                <button type="button" class="btn btn-primary equipmentAlarmGroupAddBtn cd-popup-close1">添加</button>
                <!-- 删除和导出 按钮 -->
                <div class="equipmentAlarmGroupBtnBox">
                    <button type="submit" class="btn btn-primary equipmentAlarmGroupExportBtn" style="margin-right: 10px;">导出</button>
                    <button type="button" class="btn btn-primary equipmentAlarmGroupDelBtn cd-popup-close1"></button>
                </div>
            </div>
        </div>

        <!-- 设备报警组 无表格页面 -->
        <div class="cd-popup3 equipmentAlarmGroupSmall equipmentAlarmGroupSmall-pop" id="equipmentAlarmGroupSmallModal">
            <div class="cd-popup-container3 equipmentAlarmGroupSmallModal modalStyle">
                <!-- 小叉 关闭按钮 -->
                <a class="cd-popup-close closeModal" href="javascript:;"></a>
                <div class="modal-top"></div>
                <div class="modal-title">设备报警组</div>
                <div class="selectEquipmentBox">
                    <form>
                        <div>        
                            <span>摄像头 :</span>
                            <input type="text" class="notEmptyInput"  name="camera" autocomplete="off" placeholder="设备一">                      
                        </div>
                        <div>        
                            <span>烟感 :</span>
                            <input type="text" class="notEmptyInput"  name="camera" autocomplete="off" placeholder="可最多选择三个设备">                      
                        </div>
                        <div>        
                            <span>红外线热成像 :</span>
                            <input type="text" class="notEmptyInput"  name="camera" autocomplete="off" placeholder="可最多选择三个设备">                      
                        </div>
                        <div>        
                            <span>消火栓 :</span>
                            <input type="text" class="notEmptyInput"  name="camera" autocomplete="off" placeholder="可最多选择三个设备">                      
                        </div>
                        <div>        
                            <span>智慧用电 :</span>
                            <input type="text" class="notEmptyInput"  name="camera" autocomplete="off" placeholder="只能选择一个设备">                      
                        </div>
                        <div>        
                            <span>充电桩 :</span>
                            <input type="text" class="notEmptyInput"  name="camera" autocomplete="off" placeholder="只能选择一个设备">                      
                        </div>
                    </form>                    
                </div>    
            </div>
        </div>
    </div>
</body>
</html>